<style lang="less">
    .own-space{
        &-btn-box{
            margin-bottom: 10px;
            button{
                padding-left: 0;
                span{
                    color: #2D8CF0;
                    transition: all .2s;
                }
                span:hover{
                    color: #0C25F1;
                    transition: all .2s;
                }
            }
        }
        &-tra{
            width:10px;
            height:10px;
            transform:rotate(45deg);
            position:absolute;
            top:50%;
            margin-top:-6px;
            left:-3px;
            box-shadow:0 0 2px 3px rgba(0,0,0,.1);
            background-color:white;z-index:100;
        }
        &-input-identifycode-con{
            position:absolute;
            width:200px;
            height:100px;
            right:-220px;
            top:50%;
            margin-top:-50px;
            border-radius:4px;
            box-shadow:0 0 2px 3px rgba(0,0,0,.1);
        }
    }
</style>

<template>
    <div>
        <Card>
            <p slot="title">
                <Icon type="person"></Icon>
                个人信息
            </p>
            <div>
                <Form ref="admin" :model="admin" :label-width="100" label-position="right" >
                    <FormItem label="管理员ID：">
                        <span>{{ admin.admin_id }}</span>
                    </FormItem>
                    <FormItem label="姓名：">
                        <span>{{ admin.username }}</span>
                    </FormItem>
                    <FormItem label="手机号：">
                        <span>{{ admin.mobile }}</span>
                    </FormItem>
                    <FormItem label="邮箱：">
                        <span>{{ admin.email }}</span>
                    </FormItem>
                </Form>
            </div>
        </Card>

        <Row class="margin-top-10">
            <Card>
                <p slot="title" style="height:25px;"> 修改密码</p>
                <Form ref="formValidate" :model="formValidate" :rules="ruleValidate"  :label-width="80">
                    <Form-item label="原密码" prop="password">
                        <Input v-model="formValidate.password" type="password" placeholder="Enter..."></Input>
                    </Form-item>

                    <Form-item label="新密码" prop="new_password">
                        <Input v-model="formValidate.new_password" type="password" placeholder="Enter..."></Input>
                    </Form-item>

                    <Form-item>
                        <Button type="primary" @click="handleSubmit('formValidate')">提交</Button>
                        <Button type="ghost" @click="handleReset('formValidate')" style="margin-left: 8px">重置</Button>
                    </Form-item>
                </Form>
            </Card>
        </Row>
    </div>
</template>

<script>
export default {
    data () {
        return {
            admin: {},
            formValidate: {
                admin_id: '',
                password: '',
                new_password: '',
            },
            ruleValidate: {
                password: [
                    { required: true, message: '密码不能为空', trigger: 'blur' },
                    { type: 'string', min: 6, message: '密码不能少于6位', trigger: 'blur' },
                    { type: 'string', max: 20, message: '密码最多20位', trigger: 'blur' }
                ],
                new_password: [
                    { required: true, message: '新密码不能为空', trigger: 'blur' },
                    { type: 'string', min: 6, message: '密码不能少于6位', trigger: 'blur' },
                    { type: 'string', max: 20, message: '密码最多20位', trigger: 'blur' }
                ],
            }
        };
    },
    methods: {
        handleSubmit (name) {
            this.$refs[name].validate((valid) => {
                if (valid) {
                    this.$http.post('admin/admin/resetPwd', this.$qs.stringify(this.formValidate)).then((res) => {
                        var d = res.data;
                        if (d.code == 0) {
                            this.$Notice.success({
                                title: 'Success',
                                desc: '操作成功'
                            });
                            this.$router.push({
                                name: 'loginOut'
                            });
                        } else {
                            this.$Notice.error({
                                title: 'Error Warning',
                                desc: `Error：${d.msg}<br>`
                            });
                        }
                    });
                } else {
                    this.$Message.error('表单验证失败!');
                }
            })
        },
        init () {
            this.$http.post('admin/admin/getOne', this.$qs.stringify()).then((res) => {
                var d = res.data;
                if (d.code == 0) {
                    this.admin = d.data.admin;
                    this.formValidate.admin_id = d.data.admin.admin_id;
                } else {
                    this.$Notice.error({
                        title: 'Error Warning',
                        desc: `Error：${d.msg}<br>`
                    });
                }
            });
        },
    },
    mounted () {
        this.init();
    }
};
</script>
